
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Machine Multi-Purpose HTML Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/pe-icon-7-stroke.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/flexslider.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/theme-ketchup.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="css/custom.css" rel="stylesheet" type="text/css" media="all"/>
        <link href="http://fonts.googleapis.com/css?family=Roboto:100,400,300,700,400italic,500%7CMontserrat:400,700" rel="stylesheet" type="text/css">
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300,700" rel="stylesheet" type="text/css">
        <link href="css/font-opensans.css" rel="stylesheet" type="text/css">
    </head>

    <body>

				
		<div class="nav-container">
			<nav class="nav-1">
				<div class="container">
					<div class="row">
						<div class="col-xs-12">
							<a href="index.html" class="home-link">
								<img alt="Logo" class="logo" src="img/logo-square-light.png">
							</a>
							<ul class="menu">
								<li class="has-dropdown"><a href="#">Home</a>
									<ul class="subnav">
										<li><a href="index.html">Classic Home</a></li>
										<li><a href="home-2.html">Startup</a></li>
										<li><a href="home-3.html">Rustic</a></li>
										<li><a href="home-4.html">Agency</a></li>
										<li><a href="home-5.html">One Page</a></li>
										<li><a href="home-6.html">Personal</a></li>
										<li><a href="home-7.html">Landing</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Pages</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">About</a>
											<ul class="subnav-level-2">
												<li><a href="about-1.html">About 1</a></li>
												<li><a href="about-2.html">About 2</a></li>
												<li><a href="about-3.html">About 3</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Services</a>
											<ul class="subnav-level-2">
												<li><a href="services-1.html">Services 1</a></li>
												<li><a href="services-2.html">Services 2</a></li>
												<li><a href="services-3.html">Services 3</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Coming Soon</a>
											<ul class="subnav-level-2">
												<li><a href="coming-soon-1.html">Coming Soon 1</a></li>
												<li><a href="coming-soon-2.html">Coming Soon 2</a></li>
											</ul>
										</li>
										<li><a href="404.html">404 Error</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Blog</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">Post Pages</a>
											<ul class="subnav-level-2">
												<li><a href="blog-1.html">Grid</a></li>
												<li><a href="blog-2.html">Grid Sidebar</a></li>
												<li><a href="blog-3.html">Image</a></li>
												<li><a href="blog-4.html">Image Sidebar</a></li>
											</ul>
										</li>
										<li class="has-dropdown-2"><a href="#">Articles</a>
											<ul class="subnav-level-2">
												<li><a href="article-1.html">Article</a></li>
												<li><a href="article-2.html">Article Sidebar</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Work</a>
									<ul class="subnav">
										<li class="has-dropdown-2"><a href="#">Projects</a>
											<ul class="subnav-level-2">
												<li><a href="work-1.html">Filter Grid</a></li>
												<li><a href="work-2.html">Large Grid</a></li>
											</ul>
										</li>
										<li><a href="work-single-1.html">Single</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Shop</a>
									<ul class="subnav">
										<li><a href="shop-1.html">Products Grid</a></li>
										<li><a href="product-1.html">Single Product</a></li>
									</ul>
								</li>
								<li class="has-dropdown"><a href="#">Contact</a>
									<ul class="subnav">
										<li><a href="contact-1.html">Project Planner</a></li>
										<li><a href="contact-2.html">Map & Instagram</a></li>
										<li><a href="contact-3.html">Simple Form</a></li>
									</ul>
								</li>
							</ul>
							
							<ul class="social-links">
								<li><a href="#"><i class="ti ti-twitter-alt"></i></a></li>
								<li><a href="#"><i class="icon ti ti-vimeo-alt"></i></a></li>
								<li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
							</ul>
						
							<div class="nav-functions">
						
								<div class="search-bar">
									<form class="search">
										<input type="text" placeholder="" name="search">
										<input type="submit" value="">
										<i class="pe-7s-search"></i>
									</form>
								</div>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			
				<div class="mobile-toggle">
					<div class="bar-1"></div>
					<div class="bar-2"></div>
				</div>
			</nav>
		</div>
		
		<div class="main-container">
		<section class="hero-slider centered-text-slider fixed-header">
				<ul class="slides">
					<li class="overlay text-center">
				
						<div class="background-image-holder">
							<img alt="Slide Background" class="background-image" src="img/hero30.jpg">
						</div>
				
						<div class="container vertical-align">
							<div class="row">
								<div class="col-sm-12 text-center">
									<h1 class="text-white">Create unique layouts in seconds with Machine</h1>
									<p class="super-lead text-white">Machine steps in a bold new direction for HTML templates, offering you complete creative control.</p>
									<a class="btn btn-white" href="#">Start The Convo</a>
									<a class="btn btn-filled" href="#">Roll The Dice</a>
								</div>
							</div>
						</div>
					</li><!--end of slide-->
				
				</ul>
			</section>
			
			<section class="image-block">
				<div class="container">
					<div class="row">
						<div class="col-md-4 col-sm-7">
							<div class="text-block">
								<h2>Join now and start<br> living a healthier life</h2>
								<p class="lead">
									Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime  placeat facere possimus
								</p>
								<a class="btn" href="#">Find Out How</a>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			
				<div class="image-holder col-md-6 col-sm-4 pull-right">
					<div class="background-image-holder">
						<img alt="Slide Background" class="background-image" src="img/hero21.jpg">
					</div>
				</div>
			
			</section>
			
			<section class="image-block">
				<div class="container">
					<div class="row">
						<div class="col-md-5 col-sm-7 col-md-offset-7 col-sm-offset-5">
							<div class="text-block">
								<div class="detail-line"></div>
								<h5>Delivering ideas + innovation</h5>
								<p>
									At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
								</p>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			
				<div class="image-holder col-md-6 col-sm-4 pull-left">
					<div class="image-slider">
						<ul class="slides">
							<li>
								<div class="background-image-holder">
									<img alt="Slide Background" class="background-image" src="img/box3.jpg">
								</div>
							</li>
							
							
						</ul>
					</div>
				</div>
			
			</section>
			
			<section class="action-strip-2 video-strip">
				<div class="container">
					<div class="row">
						<div class="col-sm-12 text-center">
							<div class="pre-video">
								<i class="icon pe-7s-play"></i>
								<h2>Watch the video</h2>
							</div>
						
							<div class="iframe-holder">
								<i class="close-frame pe-7s-close-circle"></i>
								<iframe src="http://player.vimeo.com/video/108018156?color=ffffff?badge=0&amp;title=0&amp;byline=0"></iframe>
							</div>
						</div>
					</div><!--end of row-->
				</div><!--end of container-->
			</section>			
			<section class="testimonials">
				<ul class="slides">
				
					<li>
						<div class="container">
							<div class="row">
								<div class="col-md-10 col-md-offset-1 text-center">
									<p class="super-lead text-white">
										“Their collaborative process and mentoring mentality not only created a solid foundation for our product, but also established a high engineering standard that we hold ourselves to. The team at Medium Rare proved themselves invaluable.”
									</p>
									<span class="alt-font">Vince Masuka / Miami Metro</span>
								</div>
							</div><!--end of row-->
						</div><!--end of container-->
					</li>
				
					<li>
						<div class="container">
							<div class="row">
								<div class="col-md-10 col-md-offset-1 text-center">
									<p class="super-lead text-white">
										“When we first used Variant, it took us under five minutes to come to grips with the software.  We applaud Medium Rare for the standout job they have done crafting this intuitive and innovative piece of software.  Truly a shake-up in the HTML game.”
									</p>
									<span class="alt-font">Brian Moser / Ice on Site</span>
								</div>
							</div><!--end of row-->
						</div><!--end of container-->
					</li>
				
					<li>
						<div class="container">
							<div class="row">
								<div class="col-md-10 col-md-offset-1 text-center">
									<p class="super-lead text-white">
										“The team at Medium Rare proved themselves invaluable. Their collaborative process and mentoring mentality have not only created a solid foundation for our product, but also established a high engineering standard that we will now hold ourselves to.”
									</p>
									<span class="alt-font">Arthur Mitchell / Trinity</span>
								</div>
							</div><!--end of row-->
						</div><!--end of container-->
					</li>
				</ul>
			</section>
			<footer class="footer-1">
				<div class="container">
					<div class="row">
						<div class="col-md-2 col-sm-3">
							<ul>
								<li><a href="#">About Us</a></li>
								<li><a href="#">Privacy Policy</a></li>
								<li><a href="#">Terms + Conditions</a></li>
								<li><a href="#">Pricing</a></li>
								<li><a href="#">Contact Us</a></li>
							</ul>
						</div>
					
						<div class="col-md-2 col-sm-3">
							<ul>
								<li><a href="#">Twitter</a></li>
								<li><a href="#">Facebook</a></li>
								<li><a href="#">Dribbble</a></li>
								<li><a href="#">Behance</a></li>
							</ul>
						</div>
					
						<div class="col-md-4 col-md-offset-4 col-sm-6">
							<p>
								Subscribe to our newsletter to receive news &amp; updates. We promise to not spam you, super promise!
							</p>
						
							<form class="form-newsletter" data-success="Thanks, we'll be in touch shortly." data-error="Please enter a valid email address">
								<input type="text" name="email" class="validate-required validate-email input-standard signup-email-field" placeholder="Your Email Here">
								<input type="submit">
								<i class="icon pe-7s-angle-right text-white"></i>
								<!--<iframe class="mail-list-form" srcdoc="&lt;!&ndash; Begin MailChimp Signup Form &ndash;&gt; <link href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <style type=&quot;text/css&quot;> 	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } 	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block. 	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id=&quot;mc_embed_signup&quot;> <form action=&quot;//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;amp;id=d4b3d090a4&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>     <div id=&quot;mc_embed_signup_scroll&quot;> 	<h2>Subscribe to our mailing list</h2> <div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> indicates required</div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-EMAIL&quot;>Email Address  <span class=&quot;asterisk&quot;>*</span> </label> 	<input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;> </div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-FNAME&quot;>First Name </label> 	<input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;&quot; id=&quot;mce-FNAME&quot;> </div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-LNAME&quot;>Last Name </label> 	<input type=&quot;text&quot; value=&quot;&quot; name=&quot;LNAME&quot; class=&quot;&quot; id=&quot;mce-LNAME&quot;> </div> 	<div id=&quot;mce-responses&quot; class=&quot;clear&quot;> 		<div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div> 		<div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div> 	</div>    &lt;!&ndash; real people should not fill this in and expect good things - do not remove this or risk form bot signups&ndash;&gt;     <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_77142ece814d3cff52058a51f_d4b3d090a4&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>     <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>     </div> </form> </div> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> &lt;!&ndash;End mc_embed_signup&ndash;&gt;">-->
								<!--</iframe>-->
							</form>
							
						</div>
					</div><!--end of row-->
				
					<div class="row">
						<div class="col-xs-12">
							<div class="footer-lower">
								<span>© Copyright 2014 Medium Rare - Made with</span><i class="icon pe-7s-like"></i><span>in Melbourne</span>
							</div>
						</div>
					</div>
				
				</div><!--end of container-->
			</footer>
		</div>
		
				
		<script src="js/jquery.min.js"></script>


        <script src="js/bootstrap.min.js"></script>
        <script src="js/skrollr.min.js"></script>
        <script src="js/flexslider.min.js"></script>
        <script src="js/lightbox.min.js"></script>
        <script src="js/twitterfetcher.min.js"></script>
        <script src="js/spectragram.min.js"></script>
        <script src="js/smooth-scroll.min.js"></script>
        <script src="js/jquery.plugin.min.js"></script>
        <script src="js/countdown.min.js"></script>
        <script src="js/placeholders.min.js"></script>
        <script src="js/parallax.js"></script>
    	<script src="js/scripts.js"></script>
    </body>
</html>

				